<template>
	<view class="u-p-l-20 u-p-r-20 u-p-t-25 " style="padding-bottom: 172rpx;box-sizing:border-box">
		<view class="itemBox " v-for="(item,index) in list" :key="index">
			<view class=" u-flex u-row-between u-p-b-18">
				<view class="u-font-30 fw-large u-flex u-row-center  "><u-avatar
						:src="item.avatar"></u-avatar>{{item.fullName}}</view>
				<u-icon @click="editFun(item)" label-pos="left" label="编辑" color="#9b9ba3" label-color="#9b9ba3"
					size="22" name="arrow-right"></u-icon>
			</view>
			<view class="desctions">
				<view>昵称:{{item.nickName}}</view>
				<view>手机号:{{item.phone}}</view>
				<view>性别:{{item.sex==1?'男':'女'}}</view>
			</view>
		</view>
	</view>

	<view class="addBtn">
		<u-button type="warning" shape="circle" @click="addFun">添加业务员</u-button>
	</view>
</template>
<script setup>
	import {
		onShow,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import shopApi from '@/api/shop'
	import {
		ref
	} from "vue";

	const list = ref([])

	let pageNo = ref(1)

	let pageTotal = ref(0)

	const getData = () => {
		uni.showLoading({
			title: "加载中..."
		})
		shopApi.listsalesman({
			pageNo: pageNo.value,
			pageSize: 10
		}).then(res => {
			uni.hideLoading()
			if (res.status == 0) {
				pageTotal.value = res.data.total
				list.value = pageNo.value == 1 ? res.data.list : list.value.concat(res.data.list)
			}
		})
	}

	onShow(() => {
		getData()
	})

	function addFun() {
		uni.navigateTo({
			url: '/subpackage/my/business/edit'
		})
	}

	function editFun(item) {
		uni.$u.route({
			url: '/subpackage/my/business/edit',
			params: {
				id: item.saleId,
				update: true
			}
		})
	}

	onReachBottom(() => {
		if (list.value.length < pageTotal.value) {
			pageNo.value += 1
			getData()
		}
	})

	onPullDownRefresh(() => {
		pageNo.value = 1
		getData()
	})
</script>

<style>
	page {
		background-color: #f0f0f5;
	}
</style>

<style lang="scss" scoped>
	.addBtn {
		position: fixed;
		width: 100%;
		bottom: 48upx;
		padding: 26upx;
	}

	.itemBox {
		background-color: #ffffff;
		border-radius: 12upx;
		padding: 26upx 12upx 26upx;
		box-shadow: 4upx 8upx 16upx rgba(0, 0, 0, .1);
		margin-bottom: 26upx;

		.desctions {
			font-size: 26upx;
			color: #9b9ba3;
			line-height: 1.8;
			padding: 10upx 24upx 5upx;
		}
	}
</style>